<template>
    <div class="login-container">
    
    <div class="login-box">
     
      <!-- 头像区域 -->
        <div class="touxiang_box">
            <img src="./assets/logo.png">
        </div>

   <!-- 表单 -->
      <el-form :model="form"   ref="ruleFormRef" :rules="FormRules" status-icon class="login-form" method="post">
      <!-- 用户名 -->
    <el-form-item    prop="userName">
      <el-input size="large"  prefix-icon="Avatar" v-model.trim="form.userName"/>
    </el-form-item>
  <!-- 密码 -->
      <el-form-item prop="password" >
      <el-input size="large" prefix-icon="ElementPlus"   v-model.trim="form.password" type="password" />
    </el-form-item>
   
   <!-- 按钮 -->
   <el-form-item class="btns"  >
        <el-button type="success" size="large"  @click="submit(ruleFormRef)" round >登录</el-button>
        <!-- 重置 -->
        <el-button type="danger" size="large" @click="test" round>注册</el-button> 
   </el-form-item>
    </el-form>

    </div>
    </div>
</template>

<script lang="ts" setup>

import { onMounted, reactive,ref } from 'vue'
import axios from "axios"
import doRequire from "./axios.js"
import qs from "qs"
import type { FormInstance } from 'element-plus'
import { ElMessage } from 'element-plus'
import router from './router'
import e from 'express'
const ruleFormRef = ref<FormInstance>()

const form = reactive({
  userName: '',
  password: '',
})

//每次加载的时候都会发送请求，看是否有过登录，没有登录的话，会跳到登录页面
onMounted(()=>{
    if(!(localStorage.getItem("userTokenStatus")=='ok')){
      
       ElMessage.error("请重新登录哦")
        router.push("login");
    }
 else{
   router.push("home");
 }
})
let submit = async (formEl: FormInstance | undefined)=>{
  if(!formEl) {
    return;
  }
   formEl.validate((valid,fields)=>{
    console.log(valid,fields);
  if(valid){
   //写axios请求
      axios.post("http://localhost:8080/user/login",qs.stringify(form)).then(res=>{
       console.log(res.data);
       if(res.data.msg=='登录成功'){
       
        router.push('home');  
          ElMessage.success("登录成功")    
      //  //前端存储token
       localStorage.setItem("token",res.data.data.token)
       }
    else{
        ElMessage.error("登录失败")
    }
     
     }
     
    )
    
  }
  else{
    ElMessage.error("登录失败")
  }

})
}


 //密码规则
  const passwordRule=(rule:any,value:any,callback:any)=>{
     
       if(value ==''){
           callback(new Error("密码不能为空哦~~"))
       }
        if(!/[0-9]{3,}/.test(value)){
          callback(new Error("至少八个字符(里面至少一个大写字母,一个小写字母,一个数字和一个特殊字符)"))
       }
       else{
         callback()
       }
  }
//账号验证
  const usernameRule=(rule:any,value:any,callback:any)=>{
     
       if(value ==''){
           callback(new Error("账号不能为空哦~~"))
       }
        if(!/^[a-z0-9_-]{5,15}$/.test(value)){
          callback(new Error("包含 _ 和 - 长度为5到16个字符的字母-数字-字符串哦~~"))
       }
       else{
         callback()
       }
  }
//表单的验证
const FormRules = reactive({
  userName: [
   {validator:usernameRule, trigger:'blur'}
  ],
  password:[
        { validator: passwordRule, trigger: 'blur' }  
  ]
  })
 

 //test

 let test=()=>{
   ElMessage.success("成功")
 }


</script>
 
<style lang="scss" scoped>
.login-container{
    background-color: #079992;
    height: 100%;
    .login-box{
         width: 450px;
         height: 300px;
         background-color: #fff;
         border-radius:5px;
         position: absolute;
         left: 50%;
         top:50%;
         transform: translate(-50%,-50%)
    }
}
.touxiang_box{
    height: 130px;
    width:130px;
    border-radius:50%;
    border:1px solid #eee;
    //加点内边距
    padding:10px;
    box-shadow: 0 0 10px #ddd;
    position: absolute;
    left: 50%;
    transform:translate(-50%,-50%);
    background-color: #fff;
      img{
          width: 100%;
          height: 100%;
           border-radius:50%;
          //加一个背景颜色
          background-color: #3c6382;
      }
}
.login-form{
     position: absolute;
     bottom: 0;
     width: 100%;
     padding: 0 20px;
     box-sizing: border-box;
}

 .btns{
     margin-left:50%;
     transform:translate(-35%)
 }

</style>